<style include="common">
  :host {
    box-sizing: border-box;
    display: block;
    height: calc(var(--personalization-app-grid-item-height) + var(--personalization-app-grid-item-spacing));
    overflow: hidden;
    padding: calc(var(--personalization-app-grid-item-spacing) / 2);
    /* Subtract 0.34px to fix subpixel rounding issues with iron-list. This
     * ensures all grid items in a row add up to at least 1px smaller than the
     * parent width. */
    width: var(--wallpaper-grid-item-width, calc(100% / 3 - 0.34px));
  }

  @media(min-width: 720px) {
    :host {
      /* Subtract 0.25px to fix subpixel rounding issues with iron-list. This
       * ensures all grid items in a row add up to at least 1px smaller than the
       * parent width. */
      width: var(--wallpaper-grid-item-width, calc(100% / 4 - 0.25px)) !important;
    }
  }

  :host(:focus-visible) {
    outline: none;
  }

  /* TODO(b/258686035): Clean up style once jelly is on by default. */
  :host([aria-selected='true']:not([placeholder])) .item {
    background-color: var(--cros-sys-highlight_shape, rgba(
      var(--cros-color-prominent-rgb),
      var(--personalization-app-second-tone-opacity)));
    border-radius:
      calc(var(--personalization-app-grid-item-border-radius) + 4px);
  }

  :host(:not([aria-selected='true'])) iron-icon,
  :host([placeholder]) iron-icon {
    display: none;
  }

  .item {
    align-items: center;
    background-color: var(--personalization-app-grid-item-background-color);
    border-radius: var(--personalization-app-grid-item-border-radius);
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-flow: row wrap;
    height: 100%;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  :host([aria-disabled='true']) .item {
    cursor: default;
  }

  :host(:focus-visible) .item {
    outline: 2px solid var(--cros-focus-ring-color);
  }

  :host([placeholder]) .item {
    animation: 2210ms linear var(--animation-delay, 1s) infinite ripple;
  }

  img {
    object-fit: cover;
    user-select: none;
  }

  :host(:not([collage])) img {
    border-radius: var(--personalization-app-grid-item-border-radius);
    height: 100%;
    position: absolute;
    width: 100%;
  }

  :host(:not([collage])) img:has(+ img) {
    clip-path: inset(0 50% 0 0);
  }

  :host(:not([collage])) img+img {
    clip-path: inset(0 0 0 50%);
  }

  :host([collage]) img {
    flex: 1 1 0;
    height: 100%;
    min-width: 50%;
  }

  :host([collage]) img:first-of-type:nth-last-of-type(n+3),
  :host([collage]) img:first-of-type:nth-last-of-type(n+3) ~ img {
    height: 50%;
  }

  :host([aria-selected='true']) img {
    animation-duration: 200ms;
    animation-fill-mode: forwards;
    animation-name: img-resize;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1.0);
  }

  @keyframes img-resize {
    100% {
      height: calc(100% - 8px);
      width: calc(100% - 8px);
    }
  }

  #textShadow {
    background: linear-gradient(rgba(var(--google-grey-900-rgb), 0),
        rgba(var(--google-grey-900-rgb), 55%));
    bottom: 0;
    height: 50%;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 1;
  }

  #text {
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    overflow: hidden;
    padding: 8px 16px;
    position: absolute;
    right: 0;
    white-space: nowrap;
    width: 100%;
    z-index: 2;
  }

  .primary-text,
  .secondary-text,
  ::slotted(.primary-text) {
    color: white;
    margin: 0;
    overflow: hidden;
    padding: 0;
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: var(--personalization-app-text-shadow-elevation-1);
  }

  .primary-text,
  ::slotted(.primary-text) {
    font: var(--cros-headline-1-font);
  }

  p.primary-text:last-of-type,
  ::slotted(p.primary-text:last-of-type) {
    margin-bottom: var(--cros-annotation-2-line-height);
  }

  .secondary-text,
  ::slotted(.secondary-text) {
    font: var(--cros-annotation-2-font);
  }

  #infoIcon {
    position: absolute;
    right: 8px;
    top: 8px;
  }

  iron-icon {
    --iron-icon-height: 20px;
    --iron-icon-width: 20px;
    animation-duration: 200ms;
    animation-name: iron-icon-scale;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1.0);
    left: 8px;
    position: absolute;
    top: 8px;
    z-index: 2;
  }

  @keyframes iron-icon-scale {
    from {
      transform: scale(0);
    }

    to {
      transform: scale(1);
    }
  }

</style>
<div class="item" part="item"
    style$="[[getItemPlaceholderAnimationDelay_(index)]]">
  <template is="dom-repeat" items="[[getSrcArray_(src, collage)]]">
    <img aria-hidden="true"
        auto-src="[[item.url]]"
        clear-src
        data-index$="[[itemsIndex]]"
        hidden$="[[isImageHidden_(imageStatus_)]]"
        is-google-photos="[[isGooglePhotos]]"
        is="cr-auto-img"
        on-error="onImgError_"
        on-load="onImgLoad_"
        part="image">
  </template>
  <div class="wallpaper-grid-item-border"></div>
  <template is="dom-if"
      if="[[isTextVisible_(imageStatus_, primaryText, secondaryText)]]"
      restamp>
    <div id="textShadow" part="textShadow"></div>
    <div id="text">
      <slot name="text">
        <template is="dom-if" if="[[isPrimaryTextVisible_(primaryText)]]" restamp>
          <p class="primary-text" title$="[[primaryText]]">[[primaryText]]</p>
        </template>
        <template is="dom-if"
            if="[[isSecondaryTextVisible_(secondaryText)]]"
            restamp>
          <p class="secondary-text" title$="[[secondaryText]]">
            [[secondaryText]]
          </p>
        </template>
      </slot>
    </div>
  </template>
  <template is="dom-if" if="[[shouldShowInfoText_(imageStatus_, infoText)]]"
      restamp>
    <!-- TODO(b/268400442) better contrast required -->
    <info-svg id="infoIcon" title$="[[infoText]]"></info-svg>
  </template>
  <iron-icon icon="[[checkmarkIcon_]]"></iron-icon>
</div>
